<template>
    <div class="yuan-container container">
        <a-card  title="提取饮片库存表">
            <div class="filter-list" style="display: flex;justify-content: flex-end">
                <a-button style="margin-bottom:10px;z-index: 10;margin-right: 10px" type="primary" @click="add">新增</a-button>
                <a-button type="primary" @click="downloadTemplate">下载导入模板</a-button>
                <a-upload name="file" :multiple="false" :before-upload="beforeUpload" :showUploadList="false">
                    <a-button type="primary" style="margin-left: 5px;margin-right: 0">导入</a-button>
                </a-upload>
            </div>
            <a-table
                :scroll="{ x: 1500 }"
                :loading="tableOption.loading"
                bordered
                :rowKey="item=>item.id"
                :data-source="tableOption.dataSource"
                :columns="tableOption.tableColumns"
                :pagination="tableOption.pagination">
            </a-table>
        </a-card>
        <!-- 弹窗表单 -->
        <addOrEdit :formData="formData" :visible="formShow" :editId="formEditId" @closeModal="formClose"></addOrEdit>
    </div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import AddOrEdit from "@/views/reportMgt/pillsInventory/components/addOrEdit.vue";
import {h} from "vue";
import nextApi from "@/api/nextApi";
import {downLoadFile} from "@/utils";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
@Component({
    components: {AddOrEdit}
})
export default class  extends Vue {
    locale:any = locale;
    //表格配置
    tableOption: any = {
        loading:false,
        tableColumns: [
            {
                title: "序号",
                dataIndex: "index",
                key: "index",
                align: "center",
                customRender: (text: any, record: any, index: number) => index + 1,
            },
            {
                title: "标准类型",
                dataIndex: "standard",
                key: "standard",
                align: "center",
            },
            {
                title: "品名",
                dataIndex: "materialName",
                key: "materialName",
                align: "center",
            },
            {
                title: "批号",
                dataIndex: "batch",
                key: "batch",
                align: "center",
            },
            {
                title: "重量(kg)",
                dataIndex: "surplus",
                key: "surplus",
                align: "center",
            },
            {
                title: "生产日期",
                dataIndex: "scTime",
                key: "scTime",
                align: "center",
            },
            {
                title: "复验期",
                dataIndex: "reCheckYp",
                key: "reCheckYp",
                align: "center",
                customRender: (text: any, record: any,index:number) => {
                    return h(
                        "a-date-picker",
                        {
                            props:{
                                value: record.reCheckYp,
                                valueFormat: "YYYY-MM-DD",
                                locale: this.locale,
                            },
                            on:{
                                change: (e: any) => {
                                    record.reCheckYp = e.target.value
                                    this.updateByTable(record)
                                }
                            }
                        }
                    )
                },
            },
            {
                title:"质量状态",
                dataIndex:"qualityState",
                key:"qualityState",
                align:"center"
                ,
                customRender: (text: any, record: any,index:number) => {
                    return h(
                        "a-select",
                        {
                            style:{width:"100%"},
                            props:{
                                value: record.qualityState,
                                options:[
                                    {
                                        value:'合格',
                                        label:"合格"
                                    },
                                    {
                                        value:'不合格',
                                        label:"不合格"
                                    }
                                ]
                            },
                            on:{
                                change: (data: any) => {
                                    record.qualityState = data
                                    this.updateByTable(record)
                                }
                            }
                        }
                    )
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                customRender: (text: any, record: any) => {
                    const editBtn = h(
                        "a-button",
                        {
                            style: { marginRight: "5px" },
                            props: { icon: "edit", type: "primary", size: "small" },
                            on: { click: () => this.edit(record) },
                        },
                        "编辑"
                    );
                    const delBtn = h(
                        "a-button",
                        {
                            style: { marginRight: "5px" },
                            props: { icon: "edit", type: "danger", size: "small" },
                            on: { click: () => this.del(record) },
                        },
                        "删除"
                    );
                    const btn: any[] = [];
                    btn.push(editBtn);
                    // btn.push(delBtn);
                    return h("div", btn);
                },
            },
        ],
        dataSource: [],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number) => `共${total}条`,
            onChange: this.pageChange,
        }
    }
    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.current = page
        this.getTableData()
    }
    formShow = false
    add(){
        this.formShow = true
    }
    del(record: any){
    }
    async updateByTable(record:any){
        try {
            this.tableOption.loading = true
            const result = await nextApi.productStorageUpdate(record)
            this.$message.success(result.msg)
            await this.getTableData()
        }finally {
            this.tableOption.loading = false
        }
    }
    formEditId = ''
    formData: any = {}
    edit(records:any){
        this.formShow = true
        this.formData = records
        this.formEditId = records.id
    }
    formClose(){
        this.formShow = false
        this.formEditId = ''
        this.getTableData()
    }
    async getTableData(){
        try{
            this.tableOption.loading = true
            let params = {
                pageSize: this.tableOption.pagination.pageSize,
                page: this.tableOption.pagination.current,
                materialType: '饮片'
            }
            const res = await nextApi.productStorageList(params)
            console.log(res)
            this.tableOption.dataSource = res.data?.records || []
            this.tableOption.pagination.total = res.data?.total || 0
        }finally {
            this.tableOption.loading = false
        }
    }
    mounted() {
        this.getTableData()
    }
    downloadTemplate(){
        this.tableOption.loading = true
        nextApi.getProductStorageImportTemplate('','饮片',(res: any) => {
            const blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                // type: "application/vnd.ms-excel",
            });
            downLoadFile(blob, '提取饮片' +"库存表导入模板");
            this.tableOption.loading = false;
        });
    }
    beforeUpload(file: any) {
        let formData = new FormData();
        formData.append("file", file);
        formData.append("materialType", '饮片')
        this.uploadTemplate(formData);
        return false;
    }
    async uploadTemplate(formData: any) {
        this.tableOption.loading = true;
        try {
            const res = await nextApi.importUnProductStorage(formData);
            this.$message.success(res.msg);
        } finally {
            this.tableOption.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">

</style>
